<template>
    <div class="container">
        <div class="list">
            <template v-if="list.length">
                <!-- 发票列表 -->
                <div class="invoice-item" v-for="(item, i) in list" :key="i">
                    <div class="invoice-header">
                        <div class="invoice-header-left">
                            <img :src="imgs.invoice" alt="" />
                            {{ invoiceMap[item.invoiceType] }}
                        </div>
                        <StatusTag :status="'INVOICE_' + item.invoiceStatus" />
                    </div>
                    <div class="invoice-item-content">
                        <div class="invoice-item-row">
                            <div class="invoice-label">创建时间：</div>
                            <div class="invoice-value">{{ item.createTimeStr }}</div>
                        </div>
                        <div class="invoice-item-row">
                            <div class="invoice-label">发票抬头：</div>
                            <div class="invoice-value">{{ item.title }}</div>
                        </div>
                        <div v-if="item.taxNo" class="invoice-item-row">
                            <div class="invoice-label">税号：</div>
                            <div class="invoice-value">{{ item.taxNo }}</div>
                        </div>
                        <div class="invoice-item-row">
                            <div class="invoice-label">电话：</div>
                            <div class="invoice-value">{{ item.phone }}</div>
                        </div>
                        <div class="invoice-item-row">
                            <div class="invoice-label">开户银行：</div>
                            <div class="invoice-value">{{ item.bank }}</div>
                        </div>
                        <div class="invoice-item-row">
                            <div class="invoice-label">银行账户：</div>
                            <div class="invoice-value">{{ item.bankAccount }}</div>
                        </div>
                        <div class="invoice-item-row">
                            <div class="invoice-label">注册地址：</div>
                            <div class="invoice-value">{{ item.address }}</div>
                        </div>
                        <div class="invoice-item-row">
                            <div class="invoice-label">备注：</div>
                            <div class="invoice-value">{{ item.mark }}</div>
                        </div>
                        <div v-if="item.refuseDesc" class="invoice-item-row">
                            <div class="invoice-label">拒绝原因：</div>
                            <div class="invoice-value">{{ item.refuseDesc }}</div>
                        </div>
                        <div v-if="item.invoiceStatus === 'FINISH' && item.invoiceImg" class="invoice-item-row">
                            <div class="invoice-label" style="align-self: flex-start; margin-top: 20rpx">发票图片</div>
                            <div class="invoice-value">
                                <div class="invoice-img" :style="{ backgroundImage: `url(${imgs.invoiceImg})` }" @click="showPreview(item)"></div>
                            </div>
                        </div>
                    </div>
                    <div class="invoice-footer">
                        <div class="invoice-footer-left">
                            <div v-if="item.invoiceStatus === 'FINISH' && item.invoiceImg" class="invoice-donwload" @click="saveImg(item)">下载发票</div>
                        </div>
                        <div class="invoice-footer-right">
                            开票金额：<span>{{ item.invoiceAmount || item.invoiceAmount === 0 ? (item.invoiceAmount / 100).toFixed(2) : "-" }}元</span>
                        </div>
                    </div>
                </div>

                <div v-if="hasMore" class="load-more" @click="getInvoiceList">加载更多</div>
                <div v-else class="no-more">已加载全部</div>
            </template>
            <div v-else class="empty">暂无数据</div>
        </div>

        <!-- 图片预览 -->
        <div v-if="previewVisible" class="preview-modal">
            <img class="preview-content" mode="aspectFit" :src="curImg" alt="" />
            <img class="preview-close" :src="imgs.close" alt="" @click="previewVisible = false" />
        </div>
    </div>
</template>
<script>
import { getInvoiceListAPI } from "../src/api/api";
import StatusTag from "../src/components/StatusTag.vue";

const app = getApp();
export default {
    components: { StatusTag },
    data() {
        return {
            imgs: app.globalData.imgs,
            invoiceMap: {
                PERSONAL: "个人/非企业",
                ENTERPRISE: "企业单位",
            },
            loading: false,
            list: [],
            page: 1,
            hasMore: true,
            previewVisible: false,
            curImg: "",
        };
    },
    onShareAppMessage() {},
    onLoad() {},
    onShow() {
        console.log("发票页 onShow");
        // 重置数据
        this.page = 1;
        this.list = [];
        this.hasMore = true;
        this.getInvoiceList();
    },
    methods: {
        showPreview(item) {
            this.curImg = item.invoiceImg;
            this.previewVisible = true;
        },
        getInvoiceList() {
            if (this.loading) return false;
            this.loading = true;
            getInvoiceListAPI({
                page: this.page,
            })
                .then((res) => {
                    this.list = this.list.concat(res.list);
                    this.hasMore = res.list.length === 20;
                    this.page++;
                    this.loading = false;
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        saveImg(item) {
            uni.downloadFile({
                //下载
                url: item.invoiceImg, //图片下载地址
                success: (res) => {
                    if (res.statusCode === 200) {
                        uni.saveImageToPhotosAlbum({
                            //保存图片到系统相册。
                            filePath: res.tempFilePath, //图片文件路径
                            success: function () {
                                uni.showToast({
                                    title: "发票保存成功",
                                    icon: "none",
                                });
                            },
                            fail: function (e) {
                                console.log(e);
                                uni.showToast({
                                    title: "发票保存失败",
                                    icon: "none",
                                });
                            },
                        });
                    }
                },
            });
        },
    },
};
</script>
<style scoped lang="less">
.container {
    position: relative;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: 160rpx;
    background-color: #f6f6f6;

    .preview-modal {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .preview-content {
            width: 100%;
        }
        .preview-close {
            width: 50rpx;
            height: 50rpx;
            margin-top: 80rpx;
        }
    }

    .title {
        width: 160rpx;
        height: 54rpx;
        margin-left: 28rpx;
        display: block;
    }

    .list {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 30rpx;

        .invoice-item {
            width: 694rpx;
            margin-bottom: 30rpx;
            box-sizing: border-box;
            padding: 0 30rpx;
            background-color: #ffffff;
            border-radius: 24rpx;

            .invoice-header {
                border-bottom: 2rpx solid #f3f3f3;
                height: 80rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .invoice-header-left {
                    display: flex;
                    align-items: center;
                    font-size: 26rpx;
                    color: #333;
                    font-weight: bold;
                    img {
                        width: 36rpx;
                        height: 36rpx;
                        margin-right: 12rpx;
                    }
                }
            }

            .invoice-item-content {
                padding-top: 20rpx;
                .invoice-item-row {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    min-height: 60rpx;
                    font-size: 26rpx;
                    line-height: 1;

                    .invoice-label {
                        color: #9a9a9a;
                    }

                    .invoice-value {
                        flex: none;
                        width: 70%;
                        color: #333;
                        text-align: right;
                        font-size: 26rpx;
                        line-height: 36rpx;
                        .invoice-img {
                            width: 200rpx;
                            height: 200rpx;
                            background-repeat: no-repeat;
                            background-position: center;
                            background-size: contain;
                        }
                    }
                }
            }

            .invoice-footer {
                height: 100rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .invoice-footer-left {
                    .invoice-donwload {
                        width: 130rpx;
                        height: 50rpx;
                        background-color: #08bfa8;
                        border-radius: 25rpx;
                        color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 24rpx;
                        line-height: 1;
                    }
                }
                .invoice-footer-right {
                    font-size: 26rpx;
                    line-height: 1;
                    color: #333;
                    span {
                        font-size: 32rpx;
                        line-height: 1;
                        color: #ff5e5e;
                        font-weight: bold;
                    }
                }
            }
        }
        .empty {
            font-size: 24rpx;
            line-height: 1;
            color: #999;
            margin-top: 100rpx;
        }
        .load-more {
            width: 100%;
            font-size: 24rpx;
            line-height: 1;
            color: #08bfa8;
            padding: 20rpx 0;
            text-align: center;
        }
        .no-more {
            width: 100%;
            font-size: 24rpx;
            line-height: 1;
            color: #ccc;
            padding: 20rpx 0 40rpx;
            text-align: center;
        }
    }
}
</style>
